<h2>Roles</h2>
<hr />
<ul ng-repeat="(roleName, config) in roles track by roleName">
    <li>
        <a href scroll-to="role-{{roleName}}" offset="80">{{ config.name }} ({{ roleName }})</a>
    </li>
</ul>
<hr/>

<div ng-repeat="(roleName, config) in roles track by roleName">
    <h3 id="role-{{ roleName }}">{{ config.name }} ({{ roleName }})</h3>

    <div ng-if="config.desc" ng-repeat="desc in config.desc track by $index">

            <div ng-if="typeOf(desc) == 'object'" ng-repeat="(title, list) in desc track by $index">
                <p>{{title}}</p>
                <ul>
                    <li ng-repeat="descItem in list track by $index">
                        {{ descItem }}
                    </li>
                </ul>
            </div>

            <p ng-if="typeOf(desc) == 'string'">{{ desc }}</p>
    </div>

    <table class="table table-bordered">
        <thead>
            <tr>
                <th style="width: 15%">Parameter</th>
                <th style="width: 35%">Description</th>
                <th style="width: 20%">YAML name</th>
                <th style="width: 10%">Type</th>
                <th style="width: 20%">Default</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="(param, def) in config.variables">
                <td>{{ def.name }}</td>
                <td>{{ def.desc }}</td>
                <td>{{ param }}</td>
                <td>{{ def.type }}</td>
                <td>{{ def.default }}</td>
            </tr>
        </tbody>

    </table>
</div>

